/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Table, TableBody, TableRow, Text, TableHead, BlobInputList, Cell,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl} from "../../common/base";
import {useOmnipotentPrefMove, useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";
import {useMeasureInpFilter} from "../../common/hooks";
import {css} from "@emotion/react";

 //编号转成前缀：避免每一项都+1；
const item零部 =[
  ['电机型号', [{t:'1', s:7},{t:'行走电动机', s:7}], '型号 / 编号', ],
  ['励磁式', [{}], '励磁方式', ],
  ['电绝缘级', [{}], '绝缘等级', ],
  ['电额定功', [{}], '额定功率 / 额定电压', ],
  ['电额电流', [{}], '额定电流', ],
  ['工制电流', [{}], '5min工作制电流', ],
  ['电制造单', [{}], '制造单位', ],
  ['发机型号', [{t:'2', s:3},{t:'发动机', s:3}], '型号 / 编号' ],
  ['发额定功', [{}], '额定功率 / 额定转速' ],
  ['发制造单', [{}], '制造单位' ],
  ['蓄额压', [{t:'3', s:3},{t:'蓄电池', s:3}], '额定电压' ],
  ['蓄额容', [{}], '额定容量' ],
  ['蓄制造单', [{}], '制造单位' ],
  ['控型号', [{t:'4', s:3},{t:'控制器', s:3}], '型号 / 编号' ],
  ['控额压', [{}], '额定电压 / 额定电流' ],
  ['控制造单', [{}], '制造单位' ],
  ['前胎制单', [{t:'5', s:4},{t:'轮胎', s:4}], '前轮胎制造单位' ],
  ['后胎制单', [{}], '后轮胎制造单位' ],
  ['轮胎型', [{}], '前轮胎型号 / 后轮胎型号' ],
  ['胎定压', [{}], '前轮胎规定气压 / 后轮胎规定气压' ],
  ['叉型号', [{t:'6', s:2},{t:'货叉', s:2}], '型号' ],
  ['叉制造单', [{}], '制造单位' ],
  ['链型号', [{t:'7', s:2},{t:'链条', s:2}], '型号' ],
  ['链制造单', [{}], '制造单位' ],
];
export const itemA零部: string[] = ['胎定压2' ];
item零部.forEach(([name, title, initIsp], i: number) => {
    itemA零部.push(name as string);
});
export const MainParts =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
    ) => {
      const {inp, setInp} = useItemInputControl({ref});
      const [getInpFilter] = useMeasureInpFilter(null, itemA零部,);
      const config = item零部;
      const titNode=useOmnipotentPrefTitle({config, });
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            {config.map(([name, _1, _2, unit]: any, i: number) => {
              return (<React.Fragment key={i}>
                <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                  {titNode[i]}&nbsp;
                     <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
                       { 19===i? <>前胎:
                            <BlobInputList value={inp?.[name] || ''}  rows={1}
                                      style={{display: 'inline-flex', width: '5rem', maxWidth: '100%', fontSize: '1rem',}}
                                      listStyle={css({fontSize: '1rem',})}
                                      onListChange={v => setInp({...inp, [name]: v || undefined}) }/>&nbsp;MPa 后轮胎:
                            <BlobInputList value={inp?.[name+'2'] || ''}  rows={1}
                                      style={{display: 'inline-flex', width: '5rem', maxWidth: '100%', fontSize: '1rem',}}
                                      listStyle={css({fontSize: '1rem',})}
                                      onListChange={v => setInp({...inp, [name+'2']: v || undefined}) }/>&nbsp;MPa
                        </>
                         :
                         <BlobInputList value={inp?.[name] || ''}  rows={1}
                                      style={{display: 'inline-flex', width: '19rem', maxWidth: '100%', fontSize: '1rem',}}
                                      listStyle={css({fontSize: '1rem',})}
                                      onListChange={v => setInp({...inp, [name]: v || undefined}) }/>
                       }
                     &nbsp;{unit}
                  </div>
                </div>
              </React.Fragment>);
            })}
            {children}
          </InspectRecordLayout>
    );
  });

const tailRender=(orc: any, name: string,lix:number)=><>
  {19===lix? <CCell>{orc?.[name]??'—'} MPa/ {orc?.[name+'2']??'—'} MPa</CCell>
      :
    <CCell>{orc?.[name]??'—'}</CCell>
  }
</>;
//4、主要零部件  ; 5、试验条件确认表
export const MainPartsVw = ({orc, rep,}: { orc: any, rep: any}
) => {
  const render = useOmnipotentPrefMove({orc,
        config: item零部,  tag:'MainPar',tailRender, pcols: 2, noNo: true, unitCel: false});
  return <>
    <div css={{"@media print": {paddingBottom: '4rem', pageBreakInside: 'avoid'}}}>
      <Text id='MainParts' variant="h4" css={{
        marginTop: '1rem',
      }}>4、主要零部件、安全保护和防护装置</Text>
    </div>
    <Table fixed={["3.8%", "10%", "32%", "%"]}
           css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4rem'}}} tight miniw={800}>
      <TableHead>
        <TableRow>
          <CCell><Text css={{fontSize: '0.75rem'}}>序号</Text></CCell><CCell colSpan={2}>项目</CCell><CCell>内容</CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink ori rep={rep} tag={'MainParts'}>
          {render}
        </RepLink>
      </TableBody>
    </Table>
    <div css={{"@media print": {paddingBottom: '4rem', pageBreakInside: 'avoid'}}}>
      <Text variant="h4" css={{marginTop: '1rem'}}>5、试验条件确认表</Text>
    </div>
    <Table fixed={["%","14%"]}
           css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4rem'}}} tight miniw={800}>
      <TableBody>
          <TableRow><CCell>试验条件</CCell><CCell>确认结果</CCell></TableRow>
        <TableRow>
          <Cell>(1)试验的环境温度、海拔高度、风速符合标准和设计要求；</Cell>
          <CCell>符合</CCell>
        </TableRow>
        <TableRow>
          <Cell>(2)现场环境不得有易燃、易爆及腐蚀性气体；</Cell>
          <CCell>符合</CCell>
        </TableRow>
        <TableRow>
          <Cell>(3)在试验现场场地周围设置安全警戒线，试验场内有安全防护措施；</Cell>
          <CCell>符合</CCell>
        </TableRow>
        <TableRow>
          <Cell>(4)试验场地符合标准和设计的要求。</Cell>
          <CCell>符合</CCell>
        </TableRow>
      </TableBody>
    </Table>
    <Text>注：每次试验前，应对试验条件进行确认，只有试验条件符合要求后，方可进行试验。</Text>
  </>;
};
